<template>
    <div class="container">
        <div class="content_wrapper">

            <a-spin :spinning="loading">
                <el-form ref="formRef" :model="formState" label-width="160px">
                    <div class="title">基本设置</div>
                        <el-form-item label="是否允许个人入驻" prop="person_apply_enabled">
                            <el-radio-group v-model="formState.person_apply_enabled" class="itemWidth">
                                <el-radio :value="1">是</el-radio>
                                <el-radio :value="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="商户入驻是否需要审核" prop="merchant_apply_need_check">
                            <el-radio-group v-model="formState.merchant_apply_need_check" class="itemWidth">
                                <el-radio :value="1">是</el-radio>
                                <el-radio :value="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="单个商户最大店铺数量" prop="max_shop_count">
                            <el-input v-model="formState.max_shop_count" />
                        </el-form-item>
                    <div class="title">入驻协议内容</div>
                    <Editor v-model:html="formState.shop_agreement"></Editor>
                </el-form>
                <div style="height: 20px"></div>
                <div class="selected-action-warp">
                    <div class="selected-action" style="padding-left: 80px">
                        <el-button :loading="confirmLoading" class="form-submit-btn" size="large" type="primary" @click="onSubmit">提 交</el-button>
                    </div>
                </div>
            </a-spin>
        </div>
    </div>
</template>

<script lang="ts" setup>
import "@/style/css/list.less";
import { onMounted, ref, shallowRef } from "vue";
import {Editor} from "@/components/editor/index"
import { message, Upload } from "ant-design-vue";
import type { PaymentFormState, Regions } from "@/types/setting/config";
import { getConfig, saveConfig, createPlatformCertificate, updateConfig } from "@/api/setting/config";

const formRef = shallowRef();
// 基本参数定义
const activeKey = ref<string>("base");
const activeName = ref<number>(1)
const confirmLoading = ref<boolean>(false);
const formState = ref<PaymentFormState>({
    person_apply_enabled: 1,
    merchant_apply_need_check: 1,
    max_shop_count: 10,
    shop_agreement: "",
});
const onTabChange = (val: string) => {
    activeKey.value = val;
};
const countryList = ref<Regions[]>([]);
// 加载列表
onMounted(async () => {
    await loadFilter();
});
const loading = ref<boolean>(true);
const loadFilter = async () => {
    try {
        const result = await getConfig({
            code: "merchant",
        });
        Object.assign(formState.value, result.item);
        countryList.value = result.countrys;
    } catch (error: any) {
        message.error(error.message);
    } finally {
        loading.value = false;
    }
};
// 表单通过验证后提交
const onSubmit = async () => {
    confirmLoading.value = true;
    try {
        const result = await updateConfig({
            code: "merchant",
           data:{ ...formState.value},
        });
        message.success(result.message);
    } catch (error: any) {
        message.error(error.message);
    } finally {
        confirmLoading.value = false;
    }
};
</script>
<style lang="less" scoped>
.content {
    padding: 10px;

    .title {
        font-weight: bold;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 14px;
    }

    .subtitle {
        color: #999;
        font-weight: normal;
        font-size: 12px;
    }
    :deep(.el-tabs--border-card > .el-tabs__content){
        padding: 0;
    }
}

.mr8 {
    margin-right: 8px;
}

.width60 {
    width: 60px;
}

.ml8 {
    margin-left: 8px;
}
</style>
<style>
.itemWidth {
    width: 100%;
}
.title {
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 14px;
}

.subtitle {
    color: #999;
    font-weight: normal;
    font-size: 12px;
}
</style>
